<script setup>
import {ref} from "vue";
import request5151 from "../../../utils/request5151.js";
import {ElMessage, ElMessageBox} from "element-plus";
//loading
const loading = ref(true)
//公告数据
const announcementInfo = ref()
//获取公告信息
const getAnnouncementInfo = () => {
  request5151({
    url: '/welcomeAnnouncement/getALlAnnounce',
    method: 'get',
  }).then((res) => {
    announcementInfo.value = res.data.data
    loading.value = false
  }).catch(() => {
    ElMessage.error('请求失败')
    loading.value = false
  })
}
getAnnouncementInfo()
//修改公告状态
const updateAnnouncementStatus = (id, onstart) => {
  request5151({
    url: '/welcomeAnnouncement/modOnStartById',
    method: "put",
    params: {
      id: id,
      onStart: onstart
    }
  }).then((res) => {
    getAnnouncementInfo()
  })
}
//删除公告
const deleteAnnouncement = (id) => {
// 提示
  ElMessageBox.confirm('是否删除该公告?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    request5151({
      url: '/welcomeAnnouncement/delete/' + id,
      method: 'delete',
    }).then((res) => {
      getAnnouncementInfo()
    })
  })
}
//添加和编辑公告弹框
const addAnnoDialogVisible = ref(false)
const modAnnoDialogVisible = ref(false)
//添加和编辑公告数据
const addAnnoData = ref({
  title: '',
  content: ''
})
const modAnnoData = ref({
  title: '',
  content: '',
  announcementId: ''
})
//清空添加公告数据
const clearAddAnnoData = () => {
  addAnnoData.value.title = ''
  addAnnoData.value.content = ''
}
//添加公告
const okAddAnno = () => {
  request5151({
    url: '/welcomeAnnouncement/addAnnounce',
    method: 'post',
    data: addAnnoData.value
  }).then((res) => {
    ElMessage.success('添加成功')
    getAnnouncementInfo()
  })
}
//修改公告
const openMod = (row) => {
  modAnnoDialogVisible.value = true;
  modAnnoData.value.announcementId = row.announcementId
  modAnnoData.value.title = row.title
  modAnnoData.value.content = row.content
}
const mokModAnno = () => {
  request5151({
    url: '/welcomeAnnouncement/updateAnnounceById',
    method: 'put',
    data: modAnnoData.value
  }).then((res) => {
    ElMessage.success('修改成功')
    getAnnouncementInfo()
  }).catch(() => {
    ElMessage.error('修改失败')
  })
}
</script>

<template>
  <div class="myannouncementInfo">
    <!--面包屑-->
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item><b>迎新信息管理</b></el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--添加公告-->
    <el-button type="success" @click="addAnnoDialogVisible = true">添加公告</el-button>
    <!--数据-->
    <el-table :data="announcementInfo" v-loading="loading"
              empty-text="暂无数据" element-loading-text="数据加载中...">
      <el-table-column prop="announcementId" label="编号" width="100"></el-table-column>
      <el-table-column prop="title" label="标题" width="130"></el-table-column>
      <el-table-column prop="content" label="内容" width="320"></el-table-column>
      <el-table-column prop="publishTime" label="发布日期" width="150"></el-table-column>
      <el-table-column prop="updateTime" label="修改日期" width="150"></el-table-column>
      <el-table-column prop="announcementStatus" label="状态" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.announcementStatus === 1" type="success">已发布</el-tag>
          <el-tag v-else type="danger">未发布</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="onstart" label="是否显示在首页" width="140">
        <template #default="scope">
          <el-switch
              v-model="scope.row.onstart"
              class="ml-2"
              :inactive-value="0"
              :active-value="1"
              @change="updateAnnouncementStatus(scope.row.announcementId, scope.row.onstart)"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="success" @click="openMod(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteAnnouncement(scope.row.announcementId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  添加公告弹框-->
    <el-dialog title="添加公告" v-model="addAnnoDialogVisible">
      <el-form v-model="addAnnoData">
        <el-form-item label="标题">
          <el-input v-model="addAnnoData.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="addAnnoData.content"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addAnnoDialogVisible = false;clearAddAnnoData()">取 消</el-button>
          <el-button type="primary" @click="addAnnoDialogVisible = false;okAddAnno()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--  修改弹窗-->
    <el-dialog title="添加公告" v-model="modAnnoDialogVisible">
      <el-form v-model="modAnnoData">
        <el-form-item label="标题">
          <el-input v-model="modAnnoData.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" >
          <el-input type="textarea" v-model="modAnnoData.content"
          :rows="10"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="modAnnoDialogVisible = false;clearAddAnnoData()">取消</el-button>
          <el-button type="primary" @click="modAnnoDialogVisible = false;mokModAnno()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
